import React,{useEffect, useState} from 'react';
import { useParams } from 'react-router-dom';
import Item from '../Home/components/Item'
import MusicHttp from '../model/MusicHttp';
const Index = () => {
    const [more,setMore] = useState([])
    const {title} = useParams();
    useEffect( async()=>{
        const fn = handleTitle(title);
        const res = await MusicHttp[fn]();
        const {playlists,albums,result} = res.data;
        if(playlists){
            setMore(playlists)
        }else if(albums){
            setMore(albums)
        }else if(result){
            setMore(result)
        }
        
    })
    const handleTitle = (title)=>{
        if(title==="hots"){
          return "getHotMusic"
        }else if(title==="news"){
          return "getNewMusic"
        }else if(title==="djs"){
          return "getDjMusic"
        }
    }
    return (
        <div className='container all'>
           {
               more.map(item=>{
                   return (
                       <div key={item.id}><Item data={item}></Item></div>
                   )
               })
           }
        </div>
    );
}

export default Index;
